@import (reference) './vars.less';
@import (reference) './mixin.less';

@nav-height: 46px;
.nav {
    position: relative;
    z-index: 80;
    width: @size-nav-width;
    height: 100%;
    background-color: @color-board;
    .animation(fade-in 1.6s both);
}
.nav-inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    font-size: 16px;
    text-align: center;
    line-height: @nav-height;
    .transform(translateY(-50%));
}
.nav-item {
    position: relative;
    display: block;
    color: @color-white;
    height: @nav-height;
    .transition(background-color 0.4s ease);

    &:hover .nav-text,
    &.active .nav-text {
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 4px;
        min-width: @size-nav-width + 4px;
        border-radius: 0 6px 6px 0;
    }
    &:hover,
    &:active {
        background-color: @color-active;
        
        .nav-text {
            background-color: @color-active;
        }
    }
    &.active {
        background-color: #676767;

        .nav-text {
            background-color: #676767;
        }
    }
}
.nav-text {
    display: block;
    height: 100%;
    padding: 0 8px;
    box-sizing: border-box;
    .ellipsis();
}

@tag-wrap-size: 300px;
.nav-item-tag {
    position: relative;

    .nav-tag-wrap {
        display: none;
        position: absolute;
        top: (@nav-height - @tag-wrap-size) / 2;
        left: 80px;
        z-index: 8;
        width: @tag-wrap-size;
        padding-left: 14px;
        box-sizing: border-box;
        .animation(fade-in-left 0.6s both);

        &.tag-show {
            display: block;
        }
    }
    .nav-tag-arrow {
        position: absolute;
        top: 50%;
        left: -10px;
        margin-top: -8px;
        line-height: 0;
        font-size: 0;
        border-width: 8px 12px;
        border-style: solid;
        border-color: transparent @color-black transparent transparent;
    }
    .widget-wrap {
        height: @tag-wrap-size;
        line-height: 22px;
        color: @color-white;
        text-align: left;
        background-color: fade(@color-black, 95%);
        box-sizing: border-box;
    }
    .tag-list {
        margin-top: 14px;
        height: 232px;
        overflow-x: hidden;
        overflow-y: auto;

        &::-webkit-scrollbar-thumb {
            background-color: fade(@color-white, 95%);
        }
    }
    .tag-list-item {
        float: left;
        margin-right: 6px;
        margin-bottom: 6px;
    }
    .tag-list-link {
        display: block;
        color: #e6e6e6;
        padding: 2px 10px;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;

        &:hover,
        &:active {
            color: #e6e6e6;
            background-color: #212121;
        }
    }
}

.nav-mobile {
    display: none;
}
.nav-mobile-item {
    .flex-item();
}
.nav-mobile-title {
    color: @color-white;
    line-height: @size-mobile-nav-height;
    .ellipsis();
}
.open-panel {
    width: @size-mobile-nav-height;
    padding: 0 10px;
    color: @color-white;
    font-size: 18px;
    line-height: @size-mobile-nav-height;
    background-color: transparent;
    border: none;
    box-sizing: border-box;

    &:focus,
    &:active {
        background-color: #414141;
    }
}


@media screen and (max-width: @size-mobile-screen-width) {
    .nav {
        width: auto;
        height: auto;
    }
    .nav-inner {
        position: static;
        height: @size-mobile-nav-height;
        font-size: 13px;
        line-height: @size-mobile-nav-height;
        background-color: @color-primary;
        .flexbox();
        .transform(none);
    }
    .nav-item {
        width: 100%;
        height: @size-mobile-nav-height;
        .flex-item();

        &:hover .nav-text,
        &.active .nav-text {
            position: static;
            min-width: auto;
            padding-left: 8px;
            border-radius: 0;
        }
    }

    .nav-item-tag {
        .nav-tag-wrap {
            position: fixed;
            top: 0;
            left: 0;
            bottom: @size-mobile-nav-height;
            width: 100%;
            padding-left: 0;
            .animation(fade-in 0.6s both);
        }
        .nav-tag-arrow {
            display: none;
        }
        .widget-wrap {
            height: 100%;
            background-color: fade(@color-black, 90%);
        }
    }

    .nav-mobile {
        height: @size-mobile-nav-height;
        .flexbox();
        .justify-content(space-between);
    }
}
